<template>
  <div class="box">
    <div class="Header">
      <van-icon name="arrow-left" @click="go" />初三化学一模考题
    </div>
    <div>
    <div class="list">
      <div class="left" @click="jin">
        <p>
          <van-icon name="wap-nav" />
          <span>题库选择</span>
        </p>
      </div>
      <div class="right">
        <van-icon name="setting-o" @click="showPopup" />
      </div>
      </div>
      
      <!-- 添加内容 -->
      <div class="middle">
        <div class="box1">
          <p>
        <van-icon name="checked" style="position: fixed;bottom:455px;right:450px"/>
        <span>数学</span>
        <span>0/14</span>
        <span @click="inline">></span>
        </p>
        <div class="box2" style="margin-top:3px">
        <van-progress :percentage="50" color="#f2826a" />
        </div>
        </div>
      </div>
      <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <div class="txt">
          <p style="font-size:15px">考点专练设置</p>

          <p style="color:#aaa;float:left; font-size:12px;margin-left:20px">设置考点专练出题数量</p>
        </div>
        <div class="tet">
          <van-radio-group v-model="radio" direction="horizontal" icon-size="14px">
            <van-radio name="1">随机处15到</van-radio>
            <van-radio name="2">按顺序做题</van-radio>
          </van-radio-group>
        </div>
        <button class="btn">确定</button>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      radio: "1"
    };
  },
  created() {},
  mounted() {},
  methods: {
    go() {
      this.$router.push("/exercise");
    },
    jin() {
      this.$router.push("/designed");
    },
    showPopup() {
      this.show = true;
    },
    inline(){
      this.$router.push('/ques')
    }
  }
};
</script>

<style scoped>
.box {
  /* background: #f0f2f5; */
  width: 100%;
  height: 110%;
  font-size: 12px;
}
.Header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  text-align: center;
  color: #5e5959;
  font-size: 18px;
  border-bottom: 10px solid #f0f2f5;
}
.van-icon {
  float: left;
  margin-top: 15px;
}
.list {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list .left {
  margin-left: 10px;
  position: relative;
  top: -10px;
}
.list span {
  font-size: 16px;
  width: 80px;
  /* margin-top: 10px; */
  position: absolute;
  top: -5px;
}
.list .van-icon {
  margin-top: 10px;
}
.right > .van-icon {
  font-size: 24px;
  margin-right: 10px;
}
.txt {
  text-align: center;
  border-bottom: 1px solid #f0f2f5;
}
.tet {
  margin-top: 52px;
}
.van-radio-group {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
}
.btn {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  margin-top: 30px;
  border: 0;
  background: orangered;
  color: #fff;
  font-size: 20px;
  margin-bottom: 0;
}
 .middle{
   width: 90%;
   height: 50px;
   border: 2px solid #ddd;
   margin-left: 5%;
   border-radius: 5%;
   text-align: center;
 }
 .middle>.box1{
   width: 90%;
   /* height: 15px; */
   text-align: center;
   line-height: 25px;
   padding: 0 5%;
 }
 .middle>.box1>p{
   display: flex;
   justify-content: space-around;
   /* margin-left: 10%; */
 }
</style>
